<template>
  <div>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-12">
        <h2>文件</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'productList' }">
              项目列表
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'product' }">
              文件
            </router-link>
          </li>
          <li class="active">
            <strong>文件编辑</strong>
          </li>
        </ol>
      </div>
    </div>
    <div class="wrapper wrapper-content  animated fadeInUp">
      <div class="ibox">
        <div class="ibox-title">
            <h5></h5>
            <div class="ibox-tools">
              <router-link :to="{ name: 'product', params: { productId: $route.params.productId } }" class="btn btn-primary btn-xs">
                  <small><i class="fa fa-undo"></i></small> 返回
              </router-link>
            </div>
        </div>
        <div class="ibox-content">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-3 control-label">文件</label>
              <div class="col-sm-9 ">
                  <a v-if='!uploadFlag' class="btn btn-primary btn-xs" v-on:click="uploadFlagChange" style="margin-top: 6px">
                    <i class="fa fa-edit"></i> 修改文件
                  </a>
                    <input v-if='uploadFlag' type="file" id="upload" style="display: inline-block;margin-top: 3px">
                    <small v-if='uploadFlag' >
                      <a  v-on:click="uploadFlagChange" class="btn btn-primary btn-xs" style="display: inline-block;">
                        <i class="fa fa-undo"></i>
                      </a>
                    </small>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">文件描述</label>
              <div class="col-sm-4">
                  <textarea class="form-control" v-model='description'>
                  </textarea>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">权限</label>
              <div class="col-sm-4">
                <select class="form-control" v-model="permissions" :disabled="userId != fileUserId">
                  <option v-for="(item, index) in config.filePermissionsSelect" :value="item.code">{{item.value}}</option>
                </select>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-3">
                <a class="btn btn-primary" v-on:click="submit">
                  <i class="fa fa-save"></i> 保存
                </a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
import server from '@/server/server.js'
import cookie from '@/server/cookie.js'
export default {
  name: 'fileEdit',
  data () {
    return {
      uploadFlag: false,
      userId: cookie.getCookie('id'),
      fileUserId: '',
      description: '',
      permissions: 1
    }
  },
  components: {
  },
  created () {

    const vue = this
    const params = "fileId=" + vue.$route.params.fileId
    server.get(server.getFileDetailUrl, null, params, true, false, this, function(data) {
      vue.fileUserId = data.userid
      vue.description = data.filedescription
      vue.permissions = data.filepermissions
    })   
  },
  mounted () {
  },
  methods: {
    uploadFlagChange: function() {
      this.uploadFlag = !this.uploadFlag
    },
    submit: function() {
      const vue = this

      if ((this.uploadFlag == true && !$("#upload")[0].files[0]) || !vue.description || (vue.permissions != 0 && vue.permissions != 1)) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false;
      }

      var formData = new FormData();
      // 文件修改的场合 添加文件
      if (vue.uploadFlag) {
        formData.append("upload_file", $("#upload")[0].files[0]);
      }
      formData.append("id", vue.$route.params.fileId);
      formData.append("filedescription", vue.description);
      formData.append("filepermissions", vue.permissions);
      // 用于校验用户是否存在该项目
      formData.append("productid", vue.$route.params.productId);

      $.ajax({  
        type: 'post',
        url: server.postFileUploadUrl,
        data: formData,
        cache: false,
        processData: false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
      }).success(function (data) {
        if (data.code == 0) {
            vue.$router.push({ name: 'product', params: { productId: vue.$route.params.productId } })
            vue.$toastr('success', "文件修改成功", 'success')
        } else {
            vue.$toastr('warning', data.msg, 'warning')
        }
      }).error(function () {
            vue.$toastr('error', "上传失败", 'error')
      }); 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
